<!DOCTYPE html>
<html  >
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style type="text/css">
			[ng-cloak]{display:none;}
		</style>
		
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>

		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>

		<script src="../js/common/bottom.js"></script>
		<script src="../js/service/shopingCartService.js"></script>
		<script src="../js/service/couponService.js"></script>
	</head>
	<body ng-app="mainApp" ng-controller="goodsDetailCtrl" >
		<header class="mui-bar mui-bar-nav mui-bar-detail">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购物车</h1>
		</header>
		<!-- 主页面内容容器 -->
		<div class="mui-content " style="padding-bottom: 65px;">
			<!-- 主界面具体展示内容 -->
			<ul class="mui-table-view cart">
				<li class="mui-table-view-cell mui-media" ng-repeat="goods in cart">
					<div class="mui-right">
						<div class="mui-input-row mui-checkbox mui-left">
							<label> </label>
							<input  type="checkbox" name="checkedGoods" value="{{goods}}" ng-checked="allcheck" ng-click="checkChange()" >
						</div>
						<div class="mui-pull-left">
							<a href="#">
								<img ng-if="goods.iconUrl!=undefined&&goods.iconUrl!=''" class="mui-media-object " ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{goods.iconUrl}}">
								<img ng-if="goods.iconUrl==undefined||goods.iconUrl==''" class="mui-media-object " ng-src="../images/goodsDefault.gif">
							</a>
						</div>
						<div class="mui-media-body">
							<h5><a href="#"  ng-click="goodsDetailPage(goods.id)">{{goods.title}}约{{goods.minWeight}}-{{goods.maxWeight}}克 加工费{{goods.jgf}}元/克</a></h5>
							<p class="mui-ellipsis">¥{{(goods.price+goods.jgf)*(goods.minWeight+goods.maxWeight)/2*goods.number}}</p>
							<div class="mui-numbox">
								<button class="mui-btn mui-btn-numbox-minus" type="button" ng-click="reduceNumber(goods)">-</button>
								<input class="mui-input-numbox" type="number" ng-model="goods.number" ng-change="goodsNumberChange(goods)">
								<button class="mui-btn mui-btn-numbox-plus" type="button" ng-click="addNumber(goods)">+</button>
							</div>
							<i class="mui-icon mui-icon-close mui-pull-right" ng-click="deleteGoods(goods.id,goods.goodsWeightId)"></i>
						</div>
					</div>
				</li>
			</ul>
			<ul ng-show="showYHQ" class="mui-table-view coupon_select">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#coupon_select_box">
						选择优惠券
						<span class="mui-badge">未选择</span>
					</a>
				</li>

			</ul>
			<div ng-show="showYHQ">
				<textarea placeholder="请备注..." ng-model="content" ></textarea>
			</div>
			<div id="coupon_select_box" class="mui-popover mui-popover-action mui-popover-bottom specification  coupon_select_box" style="display: block;">
				<div class="mui-input-row mui-radio mui-left">
					<label>暂不使用</label>
					<input name="radio1" type="radio" checked="" ng-click="noUseCou()" >
				</div>
				<a href="#coupon_select_box"><i class="mui-icon mui-icon-close mui-pull-right"></i></a>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="coupon_box" ng-repeat="coupon in couponList">
								<div class="mui-input-row mui-radio mui-left">
									<label></label>
									<input name="radio1" type="radio" ng-click="checkCoupon(coupon)">
								</div>
								<div class="coupon ">
									<div class="coupon-left "></div>
									<div class="coupon-center ">
										<div class="top ">
											<div ng-if="coupon.coupon.typeCode=='1'" class="price mui-pull-left mui-col-xs-6 "><i>¥</i><span>{{coupon.coupon.discountPrice}}</span></div>
											<div ng-if="coupon.coupon.typeCode=='2'" class="price mui-pull-left mui-col-xs-6 "><span>{{coupon.coupon.discountRatio}}</span>折</div>
											<div class="condition mui-pull-left mui-col-xs-6 ">
												<span>优惠券</span>
												<p>{{coupon.coupon.title}}</p>
											</div>
										</div>
											<p class="term">有效期：{{coupon.coupon.startDate|dateStr:"yyyy-MM-dd hh:mm"}}至{{coupon.coupon.endDate|dateStr:"yyyy-MM-dd hh:mm"}}</p>
									</div>
									<div class="coupon-right "></div>
								</div>
							</li>
						</ul>
					</div>

				</div>

				<div class="spe_btn ">

					<button type="button " class="mui-btn mui-btn-danger mui-pull-left mui-col-xs-12 " ng-click="couUse()">确认</button>
				</div>

			</div>
		</div>
		
		<nav class="mui-bar mui-bar-tab pro_bar cart_bar">
			<div class="mui-tab-item mui-col-xs-3">
				<div class="mui-input-row mui-checkbox mui-left">
					<label>全选</label>
					<input name="checkbox" value="Item 1" type="checkbox" ng-model="allcheck" ng-click="checkAllBtn()">
				</div>
				<span class="mui-tab-label"></span>
			</div>
			<a class="mui-tab-item mui-col-xs-5">
				<span class="mui-tab-label">合计约/g：<span class="num">{{totalWeight}}g</span></span>
			</a>
			<button type="button" id="addToOrder" class="mui-btn mui-btn-danger mui-pull-left mui-col-xs-12 " style="height: 50px;" ng-click="addToOrder()">
				<span class="mui-tab-label">提交({{sum}}件)</span></button>
		<script>	
			(function($) {
				$.init({
					swipeBack:true //启用右滑关闭功能
				});
				$(".mui-scroll-wrapper").scroll({
					bounce: false,//滚动条是否有弹力默认是true
					indicators: false, //是否显示滚动条,默认是true
				});
			})(mui);
			
			mainApp.controller('goodsDetailCtrl', function($scope, $http,shopingCartService,couponService) {
				$scope.baseUrl=baseUrl;
				$scope.showYHQ=false;
				var getList=function(){
					shopingCartService.getShopingCartList(function(data){
						$scope.cart=data.data;
						if( $scope.cart.length!=0){
                           $scope.showYHQ=true;
                       }
					},error)
				}
				getList();
				
				//优惠券信息查询
				var getCouponList = function(){
					//请求消息列表数据
					couponService.getUserCouponList(function(data){
						$scope.couponList = data.data;
						
					}, error);
				};
				getCouponList();
				//提交订单
	        	$scope.submitOrder=function(){
	        		var goodsCheckeds = getCheckBoxRes("checkedGoods");
	                var goodsCheckedList = [];
	                angular.forEach(goodsCheckeds, function (data) {
	                    goodsCheckedList.push(JSON.parse(data));
	                    
	                });
	                
	        	}
	        	//计算总价格
	        	$scope.totalPrice=0;
	            $scope.sum=0;
	            $scope.dealPrice=0;
	            $scope.totalWeight=0;
	        	var calculationTotalPrice=function(){
	        		var price=0;
	        		var sum=0;
	        		var totalWeight=0;
	        		var goodsCheckeds = getCheckBoxRes("checkedGoods");
	                var goodsCheckedList = [];
	                angular.forEach(goodsCheckeds, function (data) {
	                	var checkgoods=JSON.parse(data);
	                    goodsCheckedList.push(checkgoods);
	                    price=price+(checkgoods.price+checkgoods.jgf)*(checkgoods.minWeight+checkgoods.maxWeight)/2*checkgoods.number;
	                    totalWeight=totalWeight+(checkgoods.minWeight+checkgoods.maxWeight)/2*checkgoods.number;
	                    sum=sum+checkgoods.number;
	                });
	                $scope.totalPrice=price;
	                $scope.dealPrice=price;
	                $scope.totalWeight=totalWeight;
	                $scope.sum=sum;
	                if($scope.str!=0){
	        			if($scope.totalPrice>$scope.cou.coupon.dealPrice){//选择优惠券以后，又删减商品数量了，
	        				$scope.dealPrice=$scope.totalPrice-$scope.cou.coupon.discountPrice;
	        			}
	        			
	        		}
	        	}
	        	//点选触发事件
	        	$scope.checkChange=function(){
	        		calculationTotalPrice();
	        	}
	        	//全选
	        	$scope.checkAllBtn=function(){
	        		calculationTotalPrice();
	        	}
	        	//增加数量
	        	$scope.addNumber=function(goods){
	        		$scope.sum=$scope.sum+1;
	        		$scope.totalPrice=$scope.totalPrice+(goods.price+goods.jgf)*(goods.minWeight+goods.maxWeight)/2;
	                $scope.dealPrice=$scope.dealPrice+(goods.price+goods.jgf)*(goods.minWeight+goods.maxWeight)/2;
	        		if($scope.str!=0){
	        			if($scope.totalPrice>$scope.cou.coupon.dealPrice){//选择优惠券以后，又删减商品数量了，
	        				$scope.dealPrice=$scope.totalPrice-$scope.cou.coupon.discountPrice;
	        			}
	        			
	        		}
	        		shopingCartService.updateShopingCartNumber(goods.id,goods.number+1,function(data){
	        			goods.number=goods.number+1;
	        		},function(err){});
	        	}
	        	//减少数量
	        	$scope.reduceNumber=function(goods){
	        		$scope.sum=$scope.sum-1;
	        		$scope.totalPrice=$scope.totalPrice-(goods.price+goods.jgf)*(goods.minWeight+goods.maxWeight)/2;
	                $scope.dealPrice=$scope.dealPrice-(goods.price+goods.jgf)*(goods.minWeight+goods.maxWeight)/2;
	        		if($scope.str!=0){
	        			if($scope.totalPrice>$scope.cou.coupon.dealPrice){//选择优惠券以后，又删减商品数量了，
	        				$scope.dealPrice=$scope.totalPrice-$scope.cou.coupon.discountPrice;
	        			}
	        			
	        		}
	        		if(goods.number<=0){
	        			deleteGoodsById(goods.id,goods.goodsWeightId);
	        		}else{
		        		shopingCartService.updateShopingCartNumber(goods.id,goods.number-1,function(data){
		        			goods.number=goods.number-1;
		        		},function(err){});
		        	}
	        	}
	        	//修改商品数量
	        	$scope.goodsNumberChange=function(goods){
	        		if(goods.number<0){
	        			mui.alert("数量不能小于0");
	        			goods.number=1;
	        		}else{
	        			shopingCartService.updateShopingCartNumber(goods.id,goods.number,function(data){
	        				calculationTotalPrice();
		        		},error);
	        		}
	        	}
	        	//删除goods
	        	var deleteGoodsById=function(goodsId,goodsWeightId){
	        		shopingCartService.deleteShopingCartGoods(goodsId,goodsWeightId,function(data){
	        			angular.forEach($scope.cart, function(goods,index) {
							if(goods.id==goodsId){
								$scope.cart.splice(index,1);
							}
						});
	        		},error);
	        	}
	        	//删除
	        	$scope.deleteGoods=function(goodsId,goodsWeightId){
	        		deleteGoodsById(goodsId,goodsWeightId);
	        		calculationTotalPrice();
	        	}
	        	
	        	$scope.cou={};
	        	$scope.str=0;
	        	
	        	$scope.checkCoupon=function(data){
	        		$scope.cou=data;
	        		$scope.str=1;
	        	}
	        	$scope.noUseCou=function(){
	        		$scope.str=0;
	        	}
	        	 //确认使用优惠券
				$scope.couUse=function(){
					
					if($scope.str==0){
						mui.alert("此次交易将不使用任何优惠券");
					}else{
						if($scope.totalPrice>=$scope.cou.coupon.dealPrice){
							$scope.dealPrice=$scope.totalPrice-$scope.cou.coupon.discountPrice;
							mui.alert("此次订单优惠后交易额为："+$scope.dealPrice);
						}else{
							mui.alert("不满足使用条件");
						}
					}
					document.getElementById("coupon_select_box").style.display="none";
				}
	        	
	        	//提交订单
	        	$scope.addToOrder=function(){
	        		if($scope.totalWeight==0){
	        			mui.alert("请选择订单商品");
	        			return;
	        		}
	        		document.getElementById('addToOrder').disabled = true;
	        		var goodsCheckeds = getCheckBoxRes("checkedGoods");
	        		var orderDetail={};
	        		orderDetail.totalPrice=$scope.totalPrice;//总价格
	        		orderDetail.totalWeight=$scope.totalWeight;//总重量
	        		orderDetail.dealPrice=$scope.dealPrice;//加以价格（优惠后）
	        		orderDetail.content=$scope.content;//订单备注信息
	        	
	        		if($scope.str==0){
	        			orderDetail.ifCoupon=false;
	        		}else{//之前选择过优惠券
	        			if($scope.totalPrice<$scope.cou.coupon.dealPrice){//选择优惠券以后，又删减商品数量了，
	        				orderDetail.ifCoupon=false;
	        			}else{
	        				orderDetail.ifCoupon=true;
	        				orderDetail.couponId=$scope.cou.couponId;
	        				orderDetail.couNumber=$scope.cou.number-1;//优惠券的剩余数量
	        			}
	        			
	        		}
	        		var goodsList=[];
	        		angular.forEach(goodsCheckeds, function (data) {
	                	var checkgoods=JSON.parse(data);
	                  	var goods={};
	                  	goods.goodsId=checkgoods.id;
	                  	goods.dealPrice=checkgoods.price;
	                  	goods.dealNum=checkgoods.number;
	                  	goods.content=checkgoods.content;
	                  	goods.perWeight=(checkgoods.minWeight+checkgoods.maxWeight)/2;
	                  	goods.goodsWeightId=checkgoods.goodsWeightId
	                  	goodsList.push(goods);
	                });
	                orderDetail.goods=goodsList;
	                shopingCartService.addOrderDetail(orderDetail,function(data){
	                	mui.openWindow({
							url: 'orderList.html',
							id: 'orderList'+new Date().getMilliseconds(),
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
	                },error);
	        	}
	        	
	        	$scope.goodsDetailPage=function(goodsId){
					mui.openWindow({
						url:"goodsDetails.html",
						id:'goodsDetails',
					    extras:{
					        goodsId:goodsId
					    },
					    styles: {
							popGesture:"close"	
						}
					});
				}
	        	function getCheckBoxRes(name){
				    var rdsObj   = document.getElementsByName(name);
				    var checkVal = new Array();
				    var k        = 0;
				    for(var i = 0; i < rdsObj.length; i++){
				        if(rdsObj[i].checked){
				            checkVal[k] = rdsObj[i].value;
				            k++;
				        }
				    }
				    return checkVal;
				}
	        	
			});
			
		</script>
	</body>

</html>
